import React, { Component } from 'react'
import { connect } from 'dva';
import { Form, Input, Select } from 'antd';
import { DICT } from '../enum';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';
import { DropDownSelectList, DropDownSelect } from '@/components/DropDownSelect/index';

const Option = Select.Option;

interface Props {
  current: number,
  form: any,
  dispatch?: Function,
  initCurrent: Function,
  handleExport: Function,
  productData?: Array<any>,
  brandData?: Array<any>,
  dict?: any
}

const FormItem = Form.Item;
const ONE_PAGE_SIZE = 10;

@connect(({ analyse_device }) => ({
  brandData: analyse_device.brandData,
  productData: analyse_device.productData,
  dict: analyse_device.dict,
}))
class Search extends Component<Props, any> {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'analyse_device/deviceBrand'
    });
    dispatch({
      type: 'analyse_device/optionProduct'
    });
    dispatch({
      type: 'analyse_device/queryDict',
      payload: { keyList: DICT }
    });
  }

  search = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'analyse_device/updateWisdomElectriccityCond',
          payload: {
            pageNum: 1,
            pageSize: ONE_PAGE_SIZE,
            ...values
          }
        });
        this.props.initCurrent()
      }
    });
  };

  changeExport = () => {
    this.props.handleExport();
  };

  render() {
    const { brandData, productData, dict = {} } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol key={0} span={4}>
            <FormItem
              label="运行状态"
              {...formItemLayout}
            >
              {getFieldDecorator('runStatus')(
                DropDownSelect(dict, 'device.run.status', '', '160px')
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={2} span={4}>
            <FormItem
              label="厂家"
              {...formItemLayout}
            >
              {getFieldDecorator('brandId', {
                rules: [{ message: '厂家' }],
              })(
                DropDownSelectList(brandData, '', '160px')
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={3} span={4}>
            <FormItem
              label="型号"
              {...formItemLayout}
            >
              {getFieldDecorator('productId', {
                rules: [{ message: '型号' }],
              })(
                DropDownSelectList(productData, '', '160px')
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={4} span={12}>
            <SearchRow type="flex" justify="end">
              <SearchButton onClick={() => {
                this.props.form.resetFields();
              }}>重置</SearchButton>
              <SearchButton onClick={this.changeExport}>导出</SearchButton>
              <SearchButton htmlType="submit" type="primary">搜索</SearchButton>
            </SearchRow>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create<Props>()(Search);
export default SearchS;
